import { getLocationApi } from '@/services/api';
import { useRequest } from 'ahooks';
import { Modal, Skeleton } from 'antd';
import { isEqual } from 'lodash';
import React from 'react';

const MapModal = ({ open, onCancel, onOk, info }) => {
  // 获取电池定位
  const { data, loading } = useRequest(async () => {
    const _res = await getLocationApi({
      batteries: info?.binding_batteries,
    });

    return _res?.data;
  });

  return (
    <Modal
      // title={`查询定位 - ${info?.name ?? '-'} -更新时间 ${data?.updateTime ?? '-'}`}
      title={
        <>
          查询定位 - {info?.name ?? '-'} (更新时间 {data?.updateTime ?? '-'})
        </>
      }
      open={open}
      onOk={onOk}
      onCancel={onCancel}
      width={'80%'}
    >
      <Skeleton
        loading={loading}
        active
        paragraph={{
          rows: 8,
        }}
      >
        <iframe
          src={`https://uri.amap.com/marker?position=${data?.batteryLongitude},${data?.batteryLatitude}`}
          frameborder="0"
          width={'100%'}
          height={600}
        ></iframe>
      </Skeleton>
    </Modal>
  );
};

export default React.memo(MapModal, (prev, next) => isEqual(prev, next));
